<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <ul id="box">
      <li></li>
    </ul>
    <button id="btn">恢复页面</button>
    <script>
      // 原对象
      var obj = {
        arr: ['红烧肉', '火锅', '烧烤', '烤羊腿', '锅包肉']
      }
      // 代理操作
      var pobj = new Proxy(obj, {
        get(target, key) {
          return target[key]
        },
        set(target, key, value) {
          return false
        }
      })

      loadlist(obj.arr)
      function loadlist(arr) {
        var str = ``
        for (var i = 0; i < arr.length; i++) {
          str += `<li> ${arr[i]} <button onclick=del(${i})>删除</button> </li>`
        }
        var box = document.getElementById('box')
        box.innerHTML = str
      }
      function del(index) {
        // 删除代理对象
        obj.arr.splice(index, 1)
        loadlist(obj.arr)
      }
      // 恢复页面使用原对象
      var btn = document.getElementById('btn')
      btn.onclick = function() {
        console.log(pobj.arr)
        loadlist(pobj.arr)
      }
    </script>
  </body>
</html>
